<template>
  <basic-dialop :title="用户" :visible.sync="visible" width="30%" @close="close">
    <el-form label-position="left" label-width="80px" :model="formData" v-loading="loading">
    	<el-form-item label="显示名" prop="displayName">
        <basic-input v-model="formData.displayName"></basic-input>
      </el-form-item>
      <el-form-item label="用户名" prop="name">
        <basic-input v-model="formData.name"></basic-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <basic-input v-model="formData.password"></basic-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <basic-input v-model="formData.email"></basic-input>
      </el-form-item>
      <el-form-item label="uuid" prop="uuid">
        <basic-input v-model="formData.uuid"></basic-input>
      </el-form-item>
  </el-form>
    <span slot="footer">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">确定</el-button>
    </span>
 </basic-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicDialop from "@/components/Basic/Dialop/BasicDialop.vue";
import BasicInput from "@/components/Basic/Form/BasicInput.vue";
export default Vue.extend({
   components: { BasicDialop, BasicInput },
  data() {
    return {
      loading: false,
      uploadLoading: false,
      visible: false,
      formId: NaN,
      formData: {
      	displayName:"",
        name: "",
        password:"",
        email: "",
        uuid: "",
      },
    };
  },
  methods: {
    init(id: number, data: any) {
      this.formId = id;
      this.formData = {
      	displayName:data.displayName,
        name: data.name,
        password:data.password,
        email: data.email,
        uuid: data.uuid,
      };
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    uploadImage(file: any) {
      this.uploadLoading = true;
      const form = new FormData();
      form.append("file1", file.file);
      form.append("type", "img");
      this.$mainApi.toolsApi.upload(form).then((res) => {
        (this.formData as any).photo = process.env.VUE_APP_BACKEND_SERVER_ADDR + "/" + res.data[0];
      }).finally(() => {
        this.uploadLoading = false;
      });
    },
    submit() {
      alert("开发中。。。");
      return;
      this.loading = true;
      if (this.formId) {
        this.$mainApi.userApi.patchUserById(this.formId.toString(), this.formData as any).then((res) => {
          this.$message.success("提交成功");
          this.$emit('success');
          this.visible = false;
        }).finally(() => { this.loading = false; });
      } else {
        this.$mainApi.userApi.postUser(this.formData as any).then((res) => {
          this.$message.success("提交成功");
          this.$emit('success');
          this.visible = false;
        }).finally(() => { this.loading = false; });
      }
    },
  },
})
</script>

<style>
.image-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.image-uploader .el-upload:hover {
  border-color: #409eff;
}
.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.image-uploader-image {
  width: 178px;
  height: 178px;
  display: block;
}
</style>